<template>
  <div class="notification-center">
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm">
        <el-form-item label="类型">
          <el-select v-model="filterForm.type" placeholder="全部类型">
            <el-option label="全部" value="" />
            <el-option label="系统通知" value="system" />
            <el-option label="订单消息" value="order" />
            <el-option label="库存预警" value="inventory" />
            <el-option label="其他消息" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="全部状态">
            <el-option label="全部" value="" />
            <el-option label="未读" value="unread" />
            <el-option label="已读" value="read" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="notification-list">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <h3>消息列表</h3>
            <el-tag type="info" effect="plain">共 {{ total }} 条</el-tag>
          </div>
          <div class="header-right">
            <el-button type="primary" link @click="markAllRead">
              <el-icon><Check /></el-icon>全部已读
            </el-button>
            <el-button type="danger" link @click="clearAll">
              <el-icon><Delete /></el-icon>清空消息
            </el-button>
          </div>
        </div>
      </template>

      <el-timeline>
        <el-timeline-item
          v-for="item in notifications"
          :key="item.id"
          :type="item.type"
          :color="getTypeColor(item.type)"
          :timestamp="formatTime(item.time)"
          :hollow="item.read"
          size="large"
        >
          <div class="timeline-content" :class="{ unread: !item.read }">
            <div class="content-header">
              <span class="title">{{ item.title }}</span>
              <el-tag 
                size="small" 
                :type="getTagType(item.type)"
                effect="light"
              >
                {{ getTypeName(item.type) }}
              </el-tag>
            </div>
            <div class="content-body">{{ item.content }}</div>
            <div class="content-footer">
              <div class="actions">
                <el-button 
                  v-if="!item.read" 
                  type="primary" 
                  link 
                  size="small"
                  @click="markRead(item)"
                >
                  标记已读
                </el-button>
                <el-button 
                  type="primary" 
                  link 
                  size="small"
                  @click="handleAction(item)"
                >
                  {{ getActionText(item.type) }}
                </el-button>
                <el-button 
                  type="danger" 
                  link 
                  size="small"
                  @click="deleteNotification(item)"
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Check, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(relativeTime)

// 筛选表单
const filterForm = reactive({
  type: '',
  status: '',
  dateRange: []
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 模拟数据
const notifications = ref([
  {
    id: 1,
    type: 'success',
    title: '部署成功通知',
    content: '您的应用已成功部署到生产环境',
    time: new Date().getTime() - 1000 * 60 * 30,
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '库存预警',
    content: '商品「iPhone 14 Pro」库存不足，请及时补货',
    time: new Date().getTime() - 1000 * 60 * 60,
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '系统维护通知',
    content: '系统将于今晚23:00-24:00进行例行维护，请提前做好准备',
    time: new Date().getTime() - 1000 * 60 * 60 * 2,
    read: true
  },
  {
    id: 4,
    type: 'error',
    title: '异常告警',
    content: '检测到服务器CPU使用率超过90%，请及时处理',
    time: new Date().getTime() - 1000 * 60 * 60 * 3,
    read: false
  }
])

// 获取消息类型颜色
const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    success: '#67C23A',
    warning: '#E6A23C',
    info: '#909399',
    error: '#F56C6C'
  }
  return colorMap[type] || '#909399'
}

// 获取标签类型
const getTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    success: 'success',
    warning: 'warning',
    info: 'info',
    error: 'danger'
  }
  return typeMap[type] || 'info'
}

// 获取类型名称
const getTypeName = (type: string) => {
  const nameMap: Record<string, string> = {
    success: '成功',
    warning: '警告',
    info: '信息',
    error: '错误'
  }
  return nameMap[type] || '其他'
}

// 获取操作文本
const getActionText = (type: string) => {
  const textMap: Record<string, string> = {
    success: '查看详情',
    warning: '立即处理',
    info: '了解更多',
    error: '查看原因'
  }
  return textMap[type] || '查看'
}

// 格式化时间
const formatTime = (time: number) => {
  return dayjs(time).fromNow()
}

// 筛选处理
const handleFilter = () => {
  // 实现筛选逻辑
  ElMessage.success('筛选成功')
}

const resetFilter = () => {
  filterForm.type = ''
  filterForm.status = ''
  filterForm.dateRange = []
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据
}

// 消息操作
const markRead = (item: any) => {
  item.read = true
  ElMessage.success('已标记为已读')
}

const markAllRead = () => {
  notifications.value.forEach(item => item.read = true)
  ElMessage.success('全部标记为已读')
}

const deleteNotification = (item: any) => {
  ElMessageBox.confirm(
    '确定要删除这条消息吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    notifications.value = notifications.value.filter(n => n.id !== item.id)
    ElMessage.success('删除成功')
  })
}

const clearAll = () => {
  ElMessageBox.confirm(
    '确定要清空所有消息吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    notifications.value = []
    ElMessage.success('清空成功')
  })
}

const handleAction = (item: any) => {
  // 根据不同类型实现不同的操作
  ElMessage.info(`处理${item.title}`)
}
</script>

<style scoped lang="scss">
.notification-center {
  .filter-card {
    margin-bottom: 16px;
  }
  
  .notification-list {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        
        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 500;
        }
      }
      
      .header-right {
        display: flex;
        gap: 16px;
        
        .el-button {
          display: flex;
          align-items: center;
          
          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }
    
    :deep(.el-timeline) {
      padding: 16px;
      
      .el-timeline-item {
        .el-timeline-item__node {
          &.is-hollow {
            background: #fff;
          }
        }
        
        .el-timeline-item__wrapper {
          padding-bottom: 24px;
          
          .el-timeline-item__timestamp {
            color: #909399;
            font-size: 13px;
          }
        }
      }
    }
    
    .timeline-content {
      background: #f8f9fa;
      border-radius: 4px;
      padding: 16px;
      transition: all 0.3s;
      
      &.unread {
        background: #ecf5ff;
        border-left: 3px solid #409EFF;
      }
      
      .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .title {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
      }
      
      .content-body {
        color: #606266;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 12px;
      }
      
      .content-footer {
        display: flex;
        justify-content: flex-end;
        
        .actions {
          display: flex;
          gap: 12px;
        }
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style> 